<template>
    <div class="warehouse-container">
        <div class="warehouse-card">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/warehouseList' }">仓库管理</el-breadcrumb-item>
                <el-breadcrumb-item>新增仓库</el-breadcrumb-item>
            </el-breadcrumb>

            <div class="section-title">基本信息</div>
            <el-form ref="param" :model="param" label-width="80px" :rules="rules">
                <el-form-item label="仓库名称" prop="name">
                    <el-input placeholder="请输入仓库名称" v-model="param.name">
                        <i slot="prefix" class="el-icon-office-building"></i>
                    </el-input>
                </el-form-item>

                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="所在城市" prop="cityId">
                            <el-select v-model="param.cityId" clearable placeholder="请选择城市" class="full-width">
                                <el-option
                                    v-for="item in cityOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="所在区域" prop="districtId">
                            <el-select v-model="param.districtId" clearable placeholder="请选择区域" class="full-width">
                                <el-option
                                    v-for="item in districtOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="仓库面积" prop="area">
                            <el-input placeholder="请输入面积" v-model="param.area">
                                <template slot="append">m²</template>
                                <i slot="prefix" class="el-icon-full-screen"></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-form-item label="仓库地址" prop="address">
                    <el-input 
                        type="textarea" 
                        :rows="4" 
                        placeholder="请输入详细地址"
                        v-model="param.address">
                    </el-input>
                </el-form-item>
            </el-form>

            <div class="button-group">
                <el-button type="info" icon="el-icon-back" @click="cancel">取消</el-button>
                <el-button type="primary" icon="el-icon-check" @click="saveAddWarehouse">确认创建</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            param:{
                name: '',
                cityId: null,
                districtId: null,
                area: '',
                address: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入仓库名称', trigger: 'blur' },
                    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                ],
                cityId: [
                    { required: true, message: '请选择所在城市', trigger: 'change' }
                ],
                districtId: [
                    { required: true, message: '请选择所在区域', trigger: 'change' }
                ],
                area: [
                    { required: true, message: '请输入仓库面积', trigger: 'blur' },
                    { pattern: /^[0-9]+(\.[0-9]{1,2})?$/, message: '请输入有效的面积数值', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请输入仓库地址', trigger: 'blur' },
                    { min: 5, max: 200, message: '长度在 5 到 200 个字符', trigger: 'blur' }
                ]
            },
            sorters: [],
            cityOptions: [],
            districtOptions: [],
        };
    },
    methods: {
        cancel() {
            this.$router.push('/warehouseList');
        },
        
        loadCities(){
            this.$axios.get('api/warehouse/queryCities')
            .then(resp => {
                if(resp.data.code == 200){
                    this.cityOptions = resp.data.data.map(city => ({
                        label: city.name,
                        value: city.id
                    }));
                }
            })
        },
        loadDistricts(cityId) {
            this.$axios.get('api/warehouse/queryDistricts/'+cityId)
            .then(resp => {
                if(resp.data.code == 200){
                    this.districtOptions = resp.data.data.map(district => ({
                        label: district.name,
                        value: district.id
                    }));
                }
            })
        },
        saveAddWarehouse(){
            this.$axios.post('api/warehouse/addWarehouse', this.param)
            .then(resp => {
                if(resp.data.code == 200){
                    this.$message({
                        type: 'success',
                        message: '创建仓库成功'
                    });
                    this.$router.push('/warehouseList');
                }
            })
        },
    },
    watch: {
        'param.cityId'(newVal) {
            this.param.districtId = null;
            if(newVal) {
                this.loadDistricts(newVal);
            } else {
                this.districtOptions = [];
            }
        }
    },
    created() { 
        this.loadCities();
    },
};
</script>

<style scoped>
@import '../styles/warehouse-common.css';

.full-width {
    width: 100%;
}

.el-form {
    margin-top: 20px;
}

.el-input {
    width: 100%;
}

/* 输入框图标样式 */
.el-input__prefix {
    color: #909399;
}

.el-input__prefix i {
    font-size: 16px;
}

/* 表单项间距 */
.el-form-item {
    margin-bottom: 22px;
}

/* 文本域样式 */
.el-textarea__inner {
    font-family: inherit;
    padding: 10px 15px;
}

/* 按钮动画 */
.el-button {
    transition: all 0.3s;
}

.el-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 输入框焦点效果 */
.el-input__inner:focus,
.el-textarea__inner:focus {
    border-color: var(--primary-color);
}

/* 必填项标记样式 */
.el-form-item.is-required .el-form-item__label:before {
    color: var(--danger-color);
}

/* 下拉框样式 */
.el-select-dropdown__item.selected {
    color: var(--primary-color);
    font-weight: bold;
}

/* 表单验证错误提示样式 */
.el-form-item__error {
    padding-top: 4px;
    font-size: 12px;
}
</style>